<script setup lang='ts'>
import { ThemeEnum } from '@/models/app.context';
import { appRef } from '@/models/app.ref';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

/**
 * Markdown 全局统一风格 Markdown 文本显示
 * source     - 格式文本
 * reverse    - 主题反向，用于浅色背景
 * previewTheme 主题  'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis'
 */
const props = withDefaults(defineProps<{
  source: string, reverse?: boolean, theme?: ThemeEnum,
  convert?: boolean,
  previewTheme?: 'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis'
}>(), {
  previewTheme: 'default'
})
 
/** 判断输入字符串是否包含代码 */
function wrapCodeWithTripleBackticks(input) {

  if (props.convert && /.*html.*/.test(input)) {
    return "``` \n" + input + "\n ```";
  }
  input = input.replace(/\s*\\\(\s*/g, "$$");
  input = input.replace(/\s*\\\)\s*/g, "$$");
  input = input.replace(/\\\[/g, "$$$$");
  input = input.replace(/\\\]/g, "$$$$");
  return input; // 如果已经被包含 ` ``` ` 了，则直接返回输入
}

</script>
<template>
  <MdPreview :model-value="wrapCodeWithTripleBackticks(source)" class="MdPreview"
    :theme="theme || reverse ? appRef.theme === ThemeEnum.Dark ? ThemeEnum.Light : ThemeEnum.Dark : appRef.theme"
    :previewTheme="previewTheme" />
</template>
<style lang='scss' scoped></style>
